<template>
	<view>
		<!-- 交易时间 -->
		<view class="refer1">
			<view class="refer1-1">
				交易时间
			</view>
			<view class="refer1-2">
				<view class="refer1-21" @click="show = true">
					{{ date ? date : getCurrentDate() }}
					<image src="../../static/img/xiaosanjiao.png" mode=""></image>
				</view>
				<u-calendar v-model="show" :mode="mode" @change="change"></u-calendar>
				<u-line color="info" length="30rpx" />
				<view class="refer1-21" @click="show1 = true">
					{{ date1 ? date1 : getCurrentDate() }}
					<image src="../../static/img/xiaosanjiao.png" mode=""></image>
				</view>
				<u-calendar v-model="show1" :mode="mode1" @change="change1"></u-calendar>
			</view>
		</view>
		<!-- 交易类型 -->
		<view class="refer2">
			<view class="refer1-1">
				交易类型
			</view>
			<view class="refer2-1">
				<view v-for="(button, index) in buttons" :key="index" class="custom-button"
					:class="{ active: activeButtonIndex === index }" @click="toggleButton(index)">
					{{ button.text }}
				</view>
			</view>
		</view>
		<!-- 金额 -->
		<view class="refer3">
			<view class="refer1-1">
				金额
			</view>
			<view class="refer3-1">
				<u-input v-model="value" :type="type" :border="border"  class="refer3-11" placeholder="最小金额"/>
				<u-line color="info" length="30rpx" />
				<u-input v-model="value1" :type="type" :border="border"  class="refer3-11" placeholder="最大金额"/>
			</view>
		</view>
		<!-- 交易摘要 -->
		<view class="refer4">
			<view class="refer1-1">
				交易摘要
			</view>
			<view class="refer4-1">
				<view v-for="(button, index) in buttons1" :key="index" class="custom-button1"
					:class="{ active: activeButtonIndex1 === index }" @click="toggleButton1(index)">
					{{ button.text }}
				</view>
			</view>
		</view>
		<!-- 交易对方 -->
		<view class="refer5">
			<view class="refer1-1">
				交易对方
			</view>
			<view class="refer5-1">
				<u-input v-model="value" :type="type" :border="border" placeholder="对方名称" class="refer5-11"/>
				<u-input v-model="value" :type="type" :border="border" placeholder="对方账号(试试输入卡号后四位)" class="refer5-11"/>
			</view>
		</view>
		<view class="refer6" @click="yes">
			确定
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				mode: 'date',
				show1: false,
				mode1: 'date',
				date: "",
				date1: "",
				buttons: [{
						text: '全部'
					},
					{
						text: '收入'
					},
					{
						text: '支出'
					},
					// 添加更多按钮数据...
				],
				activeButtonIndex: -1,
				value: '',
				type: 'text',
				border: true,
				value1:"",
				buttons1: [{
						text: '全部'
					},
					{
						text: '工资'
					},
					{
						text: '理财'
					},
					{
						text: '基金'
					},
					{
						text: '外汇'
					},
					{
						text: '转账'
					},
				],
				activeButtonIndex1: -1,
			}
		},
		methods: {
			change(e) {
				this.date = e.result
			},
			change1(e) {
				this.date1 = e.result
			},
			getCurrentDate() {
				const currentDate = new Date();
				const year = currentDate.getFullYear();
				const month = String(currentDate.getMonth() + 1).padStart(2, '0');
				const day = String(currentDate.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			toggleButton(index) {
				this.activeButtonIndex = index;
			},
			toggleButton1(index) {
				this.activeButtonIndex1 = index;
			},
			yes(){
				uni.request({
					url: "http://172.16.105.51:8000/detailee",
					method: "POST",
					data: {
					startDate:this.date,
					endDate:this.date1
					},
					header: {
					"Content-Type": "application/json",
					},
					success: (res) => {
						// console.log(res);
						uni.navigateTo({
							url:"/pages/detail/detail?createTime="+ JSON.stringify(res.data.data)
						})
					},
					fail: (error) => {
					console.error("Error:", error);
					},
				});
			}
		}
	}
</script>

<style>
	.refer1-1 {
		font-size: 35rpx;
		font-weight: 600;
		margin-top: 40rpx;
	}

	.refer1-2 {
		display: flex;
		justify-content: space-between;
	}

	.refer1-21 {
		width: 330rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		border-radius: 100rpx;
		border: 1rpx solid rgb(160, 157, 157);
		margin-top: 30rpx;
	}

	.refer1-21 image {
		width: 30rpx;
		height: 30rpx;
		margin-left: 30rpx;
	}

	/* 初始样式 */
	  .refer2-1 {
	    display: flex;
	    flex-direction: row;
		justify-content: space-around;
		margin-top: 38rpx;
	  }
	
	  .custom-button {
	    width: 200rpx;
	    height: 80rpx;
	    background-color: white;
	    border: 1px solid gray;
	    border-radius: 50px;
	    color: gray;
	    margin-right: 10rpx;
	    display: flex;
	    justify-content: center;
	    align-items: center;
	    cursor: pointer;
	  }
	
	  /* 点击后的样式 */
	  .custom-button.active {
	    background-color: orange;
	    border: none;
	    color: white;
	  }
	  .refer3-1{
		display: flex;
		justify-content: space-around;
	  }
	  .refer3-11{
		  width: 280rpx;
		  border-radius: 50rpx;
		  margin-top: 30rpx;
	  }
	  /* 初始样式 */
	    .refer4-1 {
	      display: flex;
	      flex-direction: row;
	  	justify-content: space-around;
	  	margin-top: 20rpx;
		flex-wrap: wrap;
	    }
	  
	    .custom-button1 {
	      width: 200rpx;
	      height: 80rpx;
	      background-color: white;
	      border: 1px solid gray;
	      border-radius: 50px;
	      color: gray;
	      margin-right: 10rpx;
	      display: flex;
	      justify-content: center;
	      align-items: center;
	      cursor: pointer;
		  margin-top: 30rpx;
	    }
	  
	    /* 点击后的样式 */
	    .custom-button1.active {
	      background-color: orange;
	      border: none;
	      color: white;
	    }
		.refer5-11{
			border-radius: 50rpx;
			margin-top: 30rpx;
		}
		.refer6{
			width: 700rpx;
			height: 80rpx;
			margin-left: 20rpx;
			background-color: orange;
			color: white;
			margin-top: 80rpx;
			border-radius: 50rpx;
			text-align: center;
			line-height: 80rpx;
		}
</style>